<template>
  <div class="container">
    <div v-show="ifShow">
      <calendar :lunar="lunar" @select="select"></calendar>
    </div>
    <header class="d-flex space-between middle">
      <div class="left d-flex middle eject-calendar" @click="showCalendar">
        <span>{{ calendar.date }}</span>
        <i class="iconfont icon-rili"></i>
      </div>
      <div class="right">
        <span>农历 {{ calendar.lunar }}</span>
      </div>
    </header>
    <!-- 宜忌天气信息 -->
    <div class="selectCity d-flex">
      <div class="right d-flex column space-around">
        <div class="d-flex middle">
          <p @click="showRegion">{{ region }}
             <i class="iconfont icon-zhuanhuan"></i>
          </p>
          <span>{{ temperature }}℃</span>
        </div>
        <p>{{ weather }}</p>
      </div>
      <div class="left d-flex bottom column space-around suit-avoid" @click="toLuck">
        <p class="suit">{{ calendar.suit }}<span>宜</span></p>
        <p class="avoid">{{ calendar.avoid }}<span>忌</span></p>
      </div>
    </div>
    <awesome-picker ref="picker" :data="areaData" @confirm="handlePickerConfirm" :anchor="anchor">
    </awesome-picker>
    <!-- 今日良言 -->
    <div class="today" :style="{backgroundImage: 'url(' + picUrl + ')', backgroundSize:'cover'}" @click="detail">
      <p>{{ message }}</p>
    </div>
    <div style="padding: 0 10px;" id="topAD">
    </div>
    <history-today :selectedDate="selectDate"></history-today>
    <tabbar></tabbar>
  </div>
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
import areaData from '@/utils/area'
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/browser-style.css'
import Tabbar from '@/components/Tabbar'
import HistoryToday from '@/components/HistoryToday'

export default {
  components: {
    Calendar,
    Tabbar,
    HistoryToday
  },
  data () {
    return {
      calendar: {
        date: '',
        lunar: '',
        suit: '',
        avoid: ''
      },
      anchor: [],
      areaData: areaData, // 省市区数据
      lunar: true, // 是否展示农历
      picUrl: '', // 背景图片
      selectDate: '', // 选择日历日期
      message: '',
      ifShow: true, // 日历是否展示
      region: '',
      temperature: '',
      weather: '',
      today_words: '',
      list: [],
      qr_code: '',
      windowWidth: 320
    }
  },
  created () {
    this.getCalendar()
    this.getCurrentCity()
    _czc.push(['_trackEvent', 'index_click'])
  },
  mounted() {
    let adDiv=document.getElementById("topAD")
    let scriptDom = document.createElement('script')
    scriptDom.type = 'text/javascript'
    scriptDom.src = 'https://www.smucdn.com/smu0/o.js'
    //scriptDom.setAttribute('smua', 'd=m&s=b&u=u3637413&h=120')
    scriptDom.setAttribute('smua', 'd=m&s=b&u=u3732176&h=210')
    adDiv.appendChild(scriptDom)
  },
  methods: {
    // 获取万年历信息
    getCalendar () {
      this.$http.get({
        url: this.$services.GET_CALENDAR_ALL
      }).then(res => {
        if (res.code === 0) {
          this.calendar = res.body.calendar
          this.calendar.suit = this.calendar.suit.split('.').slice(0, 3).join(' ')
          this.calendar.avoid = this.calendar.avoid.split('.').slice(0, 3).join(' ')
          this.message = res.body.message.message.slice(0, 100)
          this.today_words = res.body.message.content
          this.picUrl = res.body.message.picUrl || 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564548356828&di=a72f33c671903968c297165381fc9364&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F13%2F20170113092725_AucYf.jpeg'
        }
      })
    },
    // 显示省市区
    showRegion () {
      this.$refs.picker.show()
      _czc.push(['_trackEvent', 'region_click'])
    },
    // 确认选择的地区
    handlePickerConfirm (e) {
      this.region = e[1].value
      this.getWeatherInfo()
    },
    // 选择日历时间
    select (e) {
      this.selectDate = e.join('-')
      this.calendar.date = this.selectDate
      this.getDateInfo()
      this.ifShow = false
      _czc.push(['_trackEvent', 'date_select', this.selectDate])
    },
    // 获取日历信息
    getDateInfo (e) {
      this.$http.get({
        url: this.$services.GET_CALENDAR,
        data: {
          d: this.selectDate
        }
      }).then(res => {
        if (res.code === 0) {
          this.calendar = res.body
          this.calendar.suit = this.calendar.suit.split('.').slice(0, 3).join(' ')
          this.calendar.avoid = this.calendar.avoid.split('.').slice(0, 3).join(' ')
        }
      })
    },
    // 切换日历显隐
    showCalendar () {
      this.ifShow = !this.ifShow
      _czc.push(['_trackEvent', 'calendar_click'])
    },
    // 获取用户当前所在城市
    getCurrentCity () {
      $.ajax({
        url: 'https://apis.map.qq.com/ws/location/v1/ip',
        type: 'get',
        dataType: 'jsonp',
        data: {
          key: '4S4BZ-B7WRX-WRV44-TSPQ7-L23Y5-MOBRI',
          output: 'jsonp'
        },
        jsonpCallback: 'QQmap',
        success: res => {
          this.region = res.result.ad_info.city
          this.getWeatherInfo()
        }
      })
    },
    // 获取天气信息
    getWeatherInfo () {
      axios({
        url: 'https://www.apiopen.top/weatherApi',
        params: {
          city: this.region
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.temperature = res.data.data.wendu
          this.weather = res.data.data.forecast[0].type
        }
      })
    },
    // 跳转到黄历页面
    toLuck () {
      this.$router.push('/calendar')
      localStorage.setItem('likeType', '0')
      _czc.push(['_trackEvent', 'taboo_click'])
    },
    // 今日良言详情
    detail () {
      if (this.today_words !== '') {
        localStorage.setItem('todayWords', this.today_words)
        this.$router.push('/today-words')
        _czc.push(['_trackEvent', 'advice_click'])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  header {
    padding: 5px 10px;
    font-weight: bold;
    font-size: 16px;
    .left {
      .iconfont {
        font-size: 20px;
        font-weight: normal;
        margin-left: 5px;
      }
    }
  }
  .selectCity {
    padding: 5px 10px 0;
    .left {
      flex: 1;
      font-size: 15px;
      font-weight: bold;
      white-space: nowrap;
      line-height: 0;
      .common {
        color: #fff;
        padding: 2px 5px;
        border-radius: 5px;
        font-size: 14px;
        margin-left: 5px;
      }
      .suit {
        color: #6ba366;
        span {
          background: #6ba366;
          @extend .common;
        }
      }
      .avoid {
        color: #ba6749;
        span {
          background: #ba6749;
          @extend .common;
        }
      }
    }
    .right {
      flex: 1;
      font-size: 18px;
      line-height: 0;
      span {
        margin-left: 10px;
        font-size: 20px;
      }
    }
  }
  .today {
    height: 150px;
    padding: 10px 0;
    border-radius: 10px;
    margin: 10px;
    position: relative;
    p {
      color: #fff;
      position: absolute;
      bottom: 0;
      font-size: 14px;
      padding: 0 10px;
      text-align: justify;
      line-height: 25px;
    }
    .share-today-words {
      position: absolute;
      top: 5px;
      right: 10px;
      button {
        border: none;
        color: #fff;
        padding: 0;
        line-height: 1;
        text {
          font-size: 16px;
          margin: 0 5px;
        }
      }
      .canvas {
        width: 100%;
        position: fixed;
        left: 0;
        top: 999999px;
      }
    }
  }
}
</style>
